import React, {Component} from 'react';
import {Dimensions, Modal, StyleSheet, Text, TouchableOpacity, View,ScrollView} from 'react-native';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../../constant/PHScreen";
import {COLOR_FOCUS, COLOR_GRAY_LINE} from "../../../constant/PHColors";
import Picker from 'react-native-picker';
import PropTypes from 'prop-types';


export default class SelectTimePlugIn extends Component {

    static propTypes = {
        closeBack:PropTypes.func,
        dateBack:PropTypes.func,
        defaultTime:PropTypes.string,
        textStyle: PropTypes.style,
    };

    constructor(props) {
        super(props);

        let date = new Date();
        let h = date.getHours();
        if(Number(h)<10){
            h = '0'+h
        }
        let m = date.getMinutes();
        if(Number(m)<10){
            m = '0'+m
        }
        let time = h+':'+m;

        this.state = {
            defaultTime:this.props.defaultTime?this.props.defaultTime:time,
        };
    }

    render() {
        return (
            <TouchableOpacity  onPress={()=>this._showDatePicker()}>
                <Text style={this.props.textStyle}>
                    {this.state.defaultTime}
                </Text>
            </TouchableOpacity>
        );
    }

    //打开日期选择 视图
    _showDatePicker() {
        let data = [
            [],
            []
        ];
        for(let i = 0;i< 24;i++){
            data[0].push(i+'时');
        }
        for(let i = 0;i< 60;i++){
            data[1].push(i+'分');
        }

        let dateStr = this.state.defaultTime;
        //console.log('dateStr',dateStr)
        let hh = parseInt(dateStr.substring(0,2));
        let mm = parseInt(dateStr.substring(3,5));

        console.log([hh+'时',mm+'分'])

        Picker.init({
            pickerConfirmBtnColor:[74, 101, 255, 1],
            pickerCancelBtnColor:[153,153,153,1],
            pickerBg:[255,255,255,1],
            pickerFontColor: [33, 33 ,33, 1],
            pickerData:data,
            selectedValue: [hh+'时',mm+'分'],
            pickerTitleText:'时间选择',
            pickerConfirmBtnText:'确定',
            pickerCancelBtnText:'取消',
            //确定
            onPickerConfirm: data => {
                let HH = data[0].substring(0,data[0].length-1);
                HH = HH.padStart(2,'0');
                let MM = data[1].substring(0,data[1].length-1);
                MM = MM.padStart(2,'0');
                data = HH+':'+MM;
                this.setState({defaultTime:data});
                this.props.dateBack(data);
            },
            //取消
            onPickerCancel: data => {
                console.log(data);
            },
            //选择
            onPickerSelect: data => {
                console.log(data);
            }
        });
        Picker.show();
    }

}

const styles = StyleSheet.create({
    textStyle:{
        fontSize:18,
    },

    content:{
        width:'100%',
        flexDirection:'row',
        justifyContent:'space-around'
    },

});